<template>
  <div class="index-page-box clear-fix">
    <div class="index-left-part float-left">
      <div class="index-left-user-info">
        <div class="user-avatar">
          <img :src="userInfo.avatar" alt="">
        </div>
      </div>
      <div class="user-name">
        <span v-text="userInfo.username"></span>
      </div>
      <div class="user-sign">
        <span v-text="userInfo.sign"></span>
      </div>
      <div class="left-user-self-links">
        <span><i class="el-icon-s-promotion"></i></span>
        <span><i class="el-icon-video-camera-solid"></i></span>
        <span><i class="el-icon-camera-solid"></i></span>
      </div>
      <div class="left-categories-box">
        <div class="category-item" v-for="item in category" :key="item.id">
          <span v-text="item.name"></span>
        </div>
      </div>
      <!-- 小轮播图-->
      <client-only>
        <div class="taobao-ad-box">
          <taobaoLoop/>
        </div>
      </client-only>
    </div>
    <div class="index-center-part float-left">
      <div class="loop-box">
        <!-- 轮播图 -->
        <el-carousel height="300px">
          <el-carousel-item v-for="item in loop" :key="item.id">
            <img :src="item.imageUrl+'_320x320xzq90.jpg_.webp'" alt="" style="object-fit: cover">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 置顶文章列表 -->
      <div class="top-articles-box">
        <div class="top-article-item clear-fix" v-for="item in topArticle" :key="item.id">
          <div class="article-left float-left">
            <div class="top-article-title">
              <span class="top-tips">置顶</span>
              <span class="top-title">{{item.title}}</span>
            </div>
            <div class="top-article-summary">
              <p>
                {{ item.summary }}
                <span>...</span>
                <span class="read-more">阅读全文</span>
              </p>
            </div>
            <div class="top-labels">
              <el-tag
                effect="plain"
                :key="tag.id"
                v-for="tag in item.labels">
                {{tag}}
              </el-tag>
            </div>
          </div>
          <div class="article-right float-right">
            <div class="top-article-cover">
              <!-- http://localhost:2021/admin/image/1639233162818_9dbadd0141634224b911b8786fa40c62.png -->
              <img :src="'http://localhost:2021/admin/image/'+item.cover" alt="">
            </div>
          </div>
        </div>
      </div>
      <!-- 文章列表 -->
      <div class="top-articles-box" v-loading="loading">
        <div class="top-article-item clear-fix" v-for="item in articleList" :key="item.id">
          <div class="article-left float-left">
            <div class="top-article-title">
              <span class="top-title">{{item.title}}</span>
            </div>
            <div class="top-article-summary">
              <p>
                {{ item.summary }}
                <span>...</span>
                <span class="read-more">阅读全文</span>
              </p>
            </div>
            <div class="top-labels">
              <el-tag
                effect="plain"
                :key="tag.id"
                v-for="tag in item.labels">
                {{tag}}
              </el-tag>
            </div>
          </div>
          <div class="article-right float-right">
            <div class="top-article-cover">
              <!-- http://localhost:2021/admin/image/1639233162818_9dbadd0141634224b911b8786fa40c62.png -->
              <img :src="'http://localhost:2021/admin/image/'+item.cover" alt="">
            </div>
          </div>
        </div>
      </div>
      <!-- 分页组件 -->
      <div class="article-page-navigation-bar">
        <el-pagination
          background
          align="center"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-size="size"
          layout="total,prev, pager, next"
          :total="total">
        </el-pagination>
        <!-- /分页组件 结束 -->
      </div>
    </div>
    <div class="index-right-part float-left">
      <!-- 搜索 -->
      <div class="right-card">
        <div class="card-title">
          内容搜索
        </div>
        <div class="card-content">
          <el-input
            placeholder="请输入关键字"
            suffix-icon="el-icon-search"
            v-model="query.title">
          </el-input>
        </div>
      </div>
      <!-- 热门标签 -->
      <div class="right-card">
        <div class="card-title">
          热门标签
        </div>
        <div class="card-content">
          <div class="labels-list-box">
            <client-only>
              <!--  valueKey="count" 权重参考字段 -->
              <wordcloud
                :fontSize="fontSize"
                :rotate="rotate"
                :margin="margin"
                :data="defaultWords"
                nameKey="name"
                valueKey="count"
                :showTooltip="false"
                :wordClick="wordClickHandler">
              </wordcloud>
            </client-only>
          </div>
        </div>
      </div>
      <!-- 公众号 -->
      <div class="right-card">
        <div class="card-title">
          公众号
        </div>
        <div class="card-content">
          <div class="wechat-subscription">
            <img src="../assets/image/lhsc.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {getUserById, categoryList, getLoopList, getRecommendArticle, getArticleList, getLabels} from '@/api/api'
  import taobaoLoop from "../components/TaobaoLoop";

  export default {
    components: {
      taobaoLoop
    },
    data() {
      return {
        loading: false,
        fontSize: [16, 30], // 标签云字体大小 区间
        margin: {top: 0, right: 0, bottom: 0, left: 0}, // 标签云
        rotate: {from: -10, to: 10, numOfOrientation: 10}, // 标签云旋转角度
        defaultWords: [], // 标签云数据
        label: ''
      }
    },
    created() {
      this.getLabels()
    },
    methods: {
      // 标签列表
      getLabels() {
        getLabels(20).then(response => {
          if (response.code === 20000) {
            this.defaultWords = response.data.records
          }
        })
      },
      // 标签云
      wordClickHandler(name, value, vm) {
        console.log('name', name);
      },
      // 切换分页
      handleCurrentChange(current) {
        this.loading = true
        getArticleList(current, this.size, this.query).then(response => {
          if (response.code === 20000) {
            this.articleList = response.data.records
          } else {
            this.$message.error(response.message)
          }
          this.loading = false
        })
      }
    },
    async asyncData({params}) {
      let userInfo = await getUserById();
      let category = await categoryList();
      let loop = await getLoopList(); // 轮播图
      let topArticle = await getRecommendArticle(); // 置顶文章

      // 文章列表
      // 1.分页对象
      const current = 1
      const size = 3
      const query = {
        title: ''
      }
      const {data: articleList} = await getArticleList(current, size, query)
      const total = articleList.total
      return {
        query,
        current,
        size,
        total,
        articleList: articleList.records,
        topArticle: topArticle.data,
        loop: loop.data,
        category: category.data,
        userInfo: userInfo.data
      }
    }

  }
</script>
<style>
  /*淘宝小轮播图*/
  .taobao-ad-box {
    margin-top: 20px;
    /*background: white;*/
    height: 250px;
  }

  /*微信公众号*/
  .wechat-subscription img {
    width: 100%;
    /*object-fit: cover;*/
  }

  /*标签云*/
  .wordCloud .text {
    cursor: pointer;
  }

  .right-card {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
  }

  /*搜索*/
  .right-card .card-title {
    font-size: 14px;
    color: #999999;
    margin-bottom: 10px;
    font-weight: 600;
  }

  /*分页-修改未激活的样式*/
  .article-page-navigation-bar .el-pagination.is-background .el-pager li {
    background: white;
    /*border-radius: 50%; !*修改为圆形 *!*/
  }

  /*修改标签的尺寸*/
  .el-tag--plain {
    height: 22px;
    line-height: 22px;
  }

  .top-labels .el-tag {
    margin-right: 10px;
    cursor: pointer;
  }

  .top-labels {
    margin-top: 20px;
  }

  .read-more:hover {
    color: #0d9eff;
    cursor: pointer;

  }

  .read-more {
    font-size: 12px;
    color: #525252;
    border-radius: 4px;
    padding: 2px 10px;
    margin-top: 5px;
    line-height: 25px;
  }

  .top-article-summary {
    width: 460px;
    padding: 10px 20px 0;
    font-size: 14px;
  }

  /* 标签超出 ... 处理 */
  .top-article-title {
    white-space: nowrap;
    width: 30em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-article-title .top-tips {
    vertical-align: middle; /*把此元素放置在父元素的中部。*/
    padding: 3px 10px;
    background: rgba(223, 97, 99, 0.86);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  .top-article-title .top-title {
    vertical-align: middle; /*把此元素放置在父元素的中部。*/
    font-size: 18px;
  }

  .top-article-item {
    margin-bottom: 20px;
    padding: 10px;
    background: white;
    border-radius: 4px;
  }

  .top-articles-box {
    margin-top: 20px;
  }

  .top-article-cover img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
  }

  .loop-box {
    background: white;
    padding: 10px;
  }

  .el-carousel {
    border-radius: 4px;
  }

  /* 修改轮播图指示标形状为圆形 */
  .el-carousel .el-carousel__button {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    margin-left: 10px;
  }

  .left-categories-box {
    background: white;
    margin-top: 20px;
    text-align: center;
    padding: 5px;
  }

  .category-item:hover {
    border-radius: 5px;
    background: #f4f4f7;
  }

  .category-item {
    padding: 10px;
    cursor: pointer;
    color: #999ca5;
  }

  .left-user-self-links {
    text-align: center;
    background: #ffffff;
  }

  .left-user-self-links span {
    font-size: 30px;
    font-weight: 600;
    margin-right: 20px;
    color: #999ca5;
    cursor: pointer;

  }

  .left-user-self-links i {
    margin-top: 15px;
  }

  .left-user-self-links i:hover {
    color: #62656e;
  }

  .user-name {
    font-size: 18px;
    padding-top: 14px;
    text-align: center;
    color: #8f929b;
    background: #ffffff;
  }

  .user-sign {
    padding-top: 5px;
    text-align: center;
    font-size: 14px;
    color: #8f929b;
    background: #ffffff;
  }

  .index-left-user-info {
    background: white;
    text-align: center;
  }

  .index-left-user-info img {
    width: 60px;
    height: 60px;
    margin-top: 20px;
    border-radius: 50%;
  }

  .index-page-box {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .index-left-part {
    padding: 10px;
    width: 220px;
  }

  .index-right-part {
    width: 210px;
    border-radius: 4px;
  }

  .index-center-part {
    width: 640px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 4px;
  }

</style>
